<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="../media/css/ui-lightness/jquery-ui-1.7.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/src/grid.loader.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#grid").jqGrid({
      url:'/jqGridModel?model=Wine',
      datatype: "json",
      mtype: 'GET',
      colNames:['id', 'Provider', 'Name', 'Year', 'Description', 'Type', 'Geographical Region', 'Creation Date', 'Edit Date'],
      colModel:[
                {name:'id',index:'id', width:55, sortable:false, editable:false, editoptions:{readonly:true,size:10}},
                {name:'provider',index:'provider', width:200,editable:false},
                {name:'name',index:'name', width:200,editable:true},
                {name:'year',index:'year', width:100,editable:true},
                {name:'description',index:'description', width:300,editable:true},
                {name:'type',index:'type', width:200,editable:true,edittype:'select',editoptions:{dataUrl: '/jqGridOptionData?entity=WineType'}},
                {name:'geographical_region',index:'geographical_region', width:200,editable:true},
                {name:'creationDate',index:'creationDate', width:100},
                {name:'editDate',index:'editDate', width:100},
           ],
     jsonReader : {
          repeatitems:false
     },
      rowNum:10,
      rowList:[10,20,30],
      pager: jQuery('#gridpager'),
      sortname: 'name',
      viewrecords: true,
      sortorder: "asc",
      caption:"Wines",
      editurl:"/jqGridModel?model=Wine"
 }).navGrid('#gridpager');
});
</script>


</head>
<body>
...
<div id="jqgrid">
    <table id="grid"></table>
    <div id="gridpager"></div>
</div>

</body>
</html>